<!-- 表单的组件 -->
<template>
    <div class="form-table">
        <el-table
                :data="tableData"
                border
        >

            <el-table-column
                    label="#"
                    width="50"

            >
                <template slot-scope="scope" >
                    <div class="scope-index">
                        <span>{{scope.$index + 1}}</span>
                    </div>
                    <div class="scope-action">
                        <el-button @click="handleRemove(scope.$index)" type="danger" icon="el-icon-minus" size="mini" circle></el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column v-if="columns.length==0"></el-table-column>
            <template v-else>
                <!-- 显示元素名称 -->

                <el-table-column
                        v-for="(column,index) in columns"
                        :key="column.key"
                        :label="column.name"

                >
                    <!-- <el-input></el-input> -->
                    <template slot-scope="scope">
                        <!-- 调用父组件生成具体表单 -->
                        <GenerateElementItem :path="widget.model+'.' + scope.$index + '.'+column.model" :blanks="blanks" is-table="table" :widget="column" v-model="scope.row[column.model]" :models.sync="tableData[scope.$index]" :remote="remote">
                            <template v-slot:[blank.name]="blankScope" v-for="blank in blanks">
                                <slot :name="blank.name" :model="scope.row"></slot>
                            </template>
                        </GenerateElementItem>

                    </template>

                </el-table-column>
            </template>

        </el-table>
        <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>
    </div>
</template>

<script>
    export default {
        components: {
            GenerateElementItem: () => import('../GenerateElementItem.vue')
        },
        props: ['columns', 'value', 'models', 'remote', 'blanks'],
        data () {
            return {
                tableData: this.value,
                dataModels: this.models
            }
        },
        methods: {

            handleAddRow () {
                let item = {}
                for (let i = 0; i < this.columns.length; i++) {
                    if (this.columns[i].type === 'blank') {
                        item[this.columns[i].model] = this.columns[i].options.defaultType == 'String' ? '' : (this.columns[i].options.defaultType == 'Object' ? {} : [])
                    } else {
                        item[this.columns[i].model] = this.columns[i].options.defaultValue
                    }
                }

                this.tableData.push(item);

            },

            handleRemove (index) {
                //console.log(22222222);
                this.tableData.splice(index, 1)
            },
            handleFoc(ee){
                // console.log(ee.currentTarget );
                //var delTarget = ee.currentTarget.nextElementSibling;
                //    delTarget.className = 'scope-index';
                //console.log(delTarget);
            }
        },
        watch: {
            value (val) {
                this.tableData = val
            },
            tableData (val) {
                this.$emit('input', val)
            },
            dataModels: {
                deep: true,
                handler (val) {
                    this.$emit('update:models', val)
                }
            },
            models: {
                deep: true,
                handler (val) {
                    this.dataModels = val
                }
            },
        },
        created(){

        }
    }
</script>

<style lang="scss" scoped>
    .form-table{
        .el-table__empty-block{
            display: none;
        }

        .scope-action{
            display: none;
        }

        .scope-index{
            display: block;
        }

        .hover-row{
            .scope-action{
                display: block;
                .el-button{
                    padding: 3px;
                }
            }

            .scope-index{
                display: none;
            }
        }
    }
</style>
